<template>
  <div>
    <vxe-form
      ref="xForm"
      title-align="right"
      title-width="100"
      :data="formData2"
      :rules="formRules2"
      :loading="loading2"
      @submit="submitEvent2"
      @reset="resetEvent">
      <vxe-form-item title="广告名称" field="name" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.name" placeholder="请输入名称" clearable
                     @input="$refs.xForm.updateStatus(scope)" style="width: 200px;"></vxe-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="广告标题" field="title" span="24">
        <template v-slot="scope">
          <vxe-input v-model="formData2.title" placeholder="请输入广告标题" clearable
                     @input="$refs.xForm.updateStatus(scope)" style="width: 200px;"></vxe-input>
        </template>
      </vxe-form-item>

      <vxe-form-item title="广告位置" field="position_id" span="24">
        <template v-slot="scope">
          <Select v-model="position" style="width:200px" clearable>
            <Option v-for="item in adOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </template>
      </vxe-form-item>

      <vxe-form-item title="开始时间" field="time_range" span="24">
        <vxe-input v-model="formData2.start_time" type="datetime" placeholder="请选择开始时间" clearable
                   style="width:300px"></vxe-input>
      </vxe-form-item>
      <vxe-form-item title="结束时间" field="time_range" span="24">
        <vxe-input v-model="formData2.end_time" type="datetime" placeholder="请选择结束" clearable
                   style="width:300px"></vxe-input>
      </vxe-form-item>

      <vxe-form-item title="广告图片" field="pic" span="24">
        <template v-slot="scope">
          <!--          <img class="icon_class" :src="formData2.pic">-->
          <div class="demo-upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
              <img :src="item.response.data.url">
              <div class="demo-upload-list-cover">
                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
              </div>
            </template>
            <template v-else>
              <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template>
          </div>
          <Upload
            ref="upload"
            :show-upload-list="false"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="2048"
            type="drag"
            action="/manage/upload/picture"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px;">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
        </template>
      </vxe-form-item>
      <vxe-form-item title="广告显示方式" field="show_type" span="24">
        <template v-slot="scope">
          <RadioGroup v-model="showType">
            <Radio v-for="item in showTypeOptions" :label="item.value">
              <span>{{ item.label }}</span>
            </Radio>
          </RadioGroup>
        </template>
      </vxe-form-item>

      <vxe-form-item title="链接类型" field="link_type" span="24">
        <template v-slot="scope">
          <RadioGroup v-model="linkType">
            <Radio v-for="item in typeOptions" :label="item.label">
              <span>{{ item.value }}</span>
            </Radio>
          </RadioGroup>
        </template>
      </vxe-form-item>

      <vxe-form-item title="链接地址" field="link" span="24">
        <template v-slot="scope">
          <vxe-textarea v-model="formData2.link" placeholder="请设置链接地址" clearable
                        @input="$refs.xForm.updateStatus(scope)" style="width: 600px;"></vxe-textarea>
        </template>
      </vxe-form-item>

      <vxe-form-item title="是否启用" field="status" span="24">
        <template v-slot>
          <vxe-switch v-model="formData2.status" on-label="启用" off-label="禁用"></vxe-switch>
        </template>
      </vxe-form-item>

      <vxe-form-item title="排序" field="sort" span="24">
        <template v-slot>
          <vxe-input type="integer" v-model="formData2.sort" :min="1" style="width: 100px;"></vxe-input>
        </template>
      </vxe-form-item>

      <vxe-form-item align="center" span="24">
        <template v-slot>
          <vxe-button type="submit" status="primary">保存</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
import { adSave, adOptions } from '@/api/ad'
import { linkTypeList } from '@/api/nav'

let formData = {
  name: '',
  description: '',
  status: true,
  verifyPassword: '',
  sort: 50
}
export default {
  name: 'new-ad',
  props: {
    position: null
  },
  data () {
    return {
      loading2: false,
      adPostionList: [],
      adOptions: [],
      formData2: Object.assign({}, formData),
      typeOptions: [],
      linkType: '',
      uploadList: [],
      showType: 'always',
      showTypeOptions: [
        {
          value: 'always',
          label: '总是'
        },
        {
          value: 'once',
          label: '一次'
        },
        {
          value: 'random',
          label: '随机'
        }
      ]
    }
  },
  mounted () {
    this.getOptions()
    setTimeout(() => {
      this.uploadList = this.$refs.upload.fileList
    }, 500)
  },
  methods: {

    submitEvent2 () {
      // this.$XModal.alert({
      //   message: '添加中，请稍后',
      //   status: 'loading',
      //   id: 'loading'
      // })
      adSave({
        name: this.formData2.name,
        title: this.formData2.title,
        position_desc: this.formData2.position_desc ? this.formData2.position_desc : '',
        status: this.formData2.status ? 1 : 0,
        pic: this.uploadList[0].response.data.url,
        show_type: this.showType,
        link: this.formData2.link,
        link_type: this.linkType,
        position_id: this.position,
        start_time: this.formData2.start_time,
        end_time: this.formData2.end_time,
        sort: this.formData2.sort ? this.formData2.sort : 100
      }).then(({ data, status }) => {
        if (status === 200) {
          // 添加成功
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'success'
          })
          this.formData2 = Object.assign({}, formData)
          this.$emit('adPositionSave')
        } else {
          this.$XModal.close('loading')
          this.$XModal.alert({
            message: data.message,
            status: 'error'
          })
        }
      }).catch((error) => {
        this.$XModal.close('loading')
        this.$XModal.alert({
          message: error.response.data.message,
          status: 'error'
        })
      })
    },
    handleRemove (file) {
      const fileList = this.$refs.upload.fileList
      this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
    },
    handleSuccess (res, file) {
      this.formData2.icon = file.response.data.url
    },
    getOptions () {
      adOptions({}).then(({ data, status }) => {
        // console.log(data)
        this.adOptions = data.data.options
        console.log(this.adOptions)
      })
      linkTypeList()
        .then(res => {
          this.typeOptions = res.data.data.typeOptions
          if (this.typeOptions[0].label) {
            this.linkType = this.typeOptions[0].label
          }
        })
    },
    resetEvent () {

    }

  }
}
</script>

<style scoped>
.icon_class {
  width: 200px;
  height: 200px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
